<template>
  <div class="Subunit-box">
    <!-- :style="{ background: store.styleInfo.auxiliaryColor }" -->
    <component :is="getchild" :info="info" />
    <!-- <Subunit3Child1 v-if="props.ModuleId == 20" /> 
    <Subunit3Child2 v-else-if="props.ModuleId == 21" />
    <Subunit3Child3 v-else-if="props.ModuleId == 22" />
    <Subunit3Child4 v-else-if="props.ModuleId == 23" /> -->
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useProjectStore } from '@/store';
import Subunit3Child1 from './Subunit3Child1.vue';
import Subunit3Child2 from './Subunit3Child2.vue';
import Subunit3Child3 from './Subunit3Child3.vue';
import Subunit3Child4 from './Subunit3Child4.vue';
import Subunit3Child5 from './Subunit3Child5.vue';

const store = useProjectStore();
const props = defineProps({
  ModuleId: {
    type: Number,
  },
  info: {
    type: Object,
  },
});
console.log('chufa', props.ModuleId);
const getchild = computed(() => {
  switch (props.ModuleId) {
    case 20:
      return Subunit3Child1;
      break;
    case 21:
      return Subunit3Child2;
      break;
    case 22:
      return Subunit3Child3;
      break;
    case 24:
      return Subunit3Child4;
      break;
    case 23:
      return Subunit3Child5;
      break;
  }
});
</script>

<style lang="less" scoped>
@import './index.less';
.Subunit-box {
  position: relative;
}
</style>
